<template>
  <div class="category">
    <ul class="left">
      <li
      v-for="category in categorise"
      :key="category.id"
      is='router-link'
      :to="'/category/sub/' + category.id"
      tag='li'
      >{{category.name}}</li>
    </ul>
    <div class="right">
      <router-view />
    </div>
  </div>

</template>

<script>
import { getAllcategories } from '@/api/category'
export default {
  name: 'Category',
  data() {
    return {
      categorise: []
    }
  },
  created() {
    getAllcategories().then(res => {
      console.log(res)
      this.categorise = res
      this.$router.push('/category/sub/2').catch(() => {})
    })
  }
}
</script>

<style lang="scss" scoped>
  .category {
    display: flex;
    height: 100%;
    .left {
      width: 100px;
      height: 100%;
      background-color: #fdde4a;
      li {
        height: 30px;
        line-height: 30px;
        padding-left: 8px;
        margin-top: 10px;
        color: #6b4c10;
        font-size: 15px;
      }
    }
    .right {
      overflow-x: hidden;
      flex: 1;
    }

    .router-link-exact-active.router-link-active {
      color: #666;
      background: #fff;
    }
  }
</style>
